<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="d1">
    <p>{{msg}}</p>
    <button @click="msg='Hello World'">修改数据</button><br/>
    <button @click="destroy">销毁数据</button><br/>
    <!-- 当销毁了Vue之后,无法再进行修改操作 -->
    <button @click="msg='Welcome to Study Vue'">修改数据</button><br/>
</div>
<script>
    new Vue({
        el:"#d1",
        data:{
            msg:"Hello Vue",
        },
        methods:{
            destroy(){
                // 手动销毁Vue
                this.$destroy();
            }
        },
        beforeCreate:function(){
            console.log("创建前")
        },
        // 简写方式
        created(){
            console.log("创建完成之后")
        },
        beforeMount(){
            console.log("挂载前")
        },
        mounted(){
            console.log("挂载完成之后")
        },
        beforeUpdate(){
            console.log("修改前")
        },
        updated(){
            console.log("修改完成之后")
        },
        beforeDestroy(){
            console.log("销毁前")
        },
        destroyed(){
            console.log("销毁完成之后")
        },
    });
</script>
</body>
</html>